<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>
</body>
<script id="ColorVertexShader" type="x-shader/x-vertex">
    attribute vec4 a_Position;
    uniform float u_PointSize;
    uniform mat4 u_ModelM4;
    uniform mat4 u_PvM4;
    void main(){
        gl_Position = u_PvM4 * u_ModelM4 * a_Position;
        gl_PointSize = u_PointSize;
    }
</script>
<script id="ColorFragmentShader" type="x-shader/x-fragment">
    precision mediump float;
    uniform vec4 u_Color;
    void main(){
        gl_FragColor = u_Color;
    }
</script>
<script type="module">
    import { Matrix4, Vector3, Color, OrthographicCamera, PerspectiveCamera, Spherical } from '../js/three.module.js';
    import { CreateProgram, imgPromise } from '../js/Utils.js';
    import lib from '../js/ThreeLib.js';
    import CameraController from '../js/CameraController.js'
    import Poly from '../js/Poly4.js'
    import Control from '../js/Control.js'

    import Geo from '../js/Poly2/Geo.js'
    import Mat from '../js/Poly2/Mat.js'
    import Obj3D from '../js/Poly2/Obj3D.js'
    import Scene from '../js/Poly2/Scene.js'



    //#region gl
    const canvas = document.getElementById("canvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight - 4;

    const gl = canvas.getContext("webgl", { antialias: true, });

    // gl.enable(gl.DEPTH_TEST);//开始背景遮挡会频闪
    gl.enable(gl.BLEND);
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);//去图片描边
    //#endregion



    const scene = new Scene({ gl: gl });
    scene.regProgram('color', {
        program: CreateProgram(gl,
            document.querySelector('#ColorVertexShader').innerText,
            document.querySelector('#ColorFragmentShader').innerText),
        attribs: ['a_Position'],
        uniforms: ['u_PointSize', 'u_Color', 'u_ModelM4', 'u_PvM4']
    })

    const defConfig = {
        pointSize: 500,
        color: [1, 1, 1, 1],
    };


    scene.add(createAxis());




    // let a = new Vector3(0.5, 0.2);
    let a = new Vector3(0, 0, 0);
    let b = new Vector3(0.3, 0.1, 0);

    let l = b.x - a.x;
    let d = b.y - a.y;

    let sin1 = d / l;

    let c = rot(b, a, 90);

    console.log(sin1)



    let obja = create([a.x, a.y], {
        pointSize: 10, color: [1, 0, 0, 1]
    });
    scene.add(obja);

    let objb = create([b.x, b.y], {
        pointSize: 10, color: [0, 1, 0, 1]
    });
    scene.add(objb);

    let objc = create([c.x, c.y], {
        pointSize: 10, color: [0, 0, 1, 1]
    });
    scene.add(objc);

    // scene.add(createTriangle(a, b, c, new Matrix4()));

    function createNode(node, color = [1, 1, 1, 1]) {
        return new Obj3D({
            geo: new Geo({
                data: {
                    'a_Position': { size: 2, array: new Float32Array([node.x, node.y]) },
                }
            }),
            mat: new Mat({
                program: 'color',
                mode: ['POINTS'],
                data: {
                    'u_PointSize': { type: 'uniform1f', value: 10 },
                    'u_Color': { type: 'uniform4fv', value: color },
                },
            }),
        });
    }

    function create(node, config) {
        const { pointSize, color } = config;
        return new Obj3D({
            geo: new Geo({
                data: {
                    'a_Position': { size: 2, array: new Float32Array(node) },
                }
            }),
            mat: new Mat({
                program: 'color',
                mode: ['POINTS'],
                data: {
                    'u_PointSize': { type: 'uniform1f', value: pointSize },
                    'u_Color': { type: 'uniform4fv', value: color },
                    'u_ModelM4': { type: 'uniformMatrix4fv', value: new Matrix4().elements },
                    'u_PvM4': { type: 'uniformMatrix4fv', value: new Matrix4().elements },
                },
            }),
        });
    }

    function createTriangle(a, b, c, m4) {
        return new Obj3D({
            geo: new Geo({
                data: {
                    'a_Position': {
                        size: 2, array: new Float32Array([
                            a.x, a.y, b.x, b.y, c.x, c.y
                        ])
                    },
                },
                element: { array: new Uint8Array([0, 1, 1, 2, 2, 0]) }
            }),
            mat: new Mat({
                program: 'color',
                mode: ['LINES'],
                data: {
                    'u_PointSize': { type: 'uniform1f', value: 10 },
                    'u_Color': { type: 'uniform4fv', value: [1, 1, 1, 1] },
                    'u_ModelM4': { type: 'uniformMatrix4fv', value: m4.elements },
                    'u_PvM4': { type: 'uniformMatrix4fv', value: new Matrix4().elements },
                },
            }),
        });
    }

    function createAxis() {
        return new Obj3D({
            geo: new Geo({
                data: {
                    'a_Position': {
                        size: 2, array: new Float32Array([
                            0, 1, 0, -1,
                            1, 0, -1, 0,
                        ])
                    },
                },
                element: { array: new Uint8Array([0, 1, 2, 3]) }
            }),
            mat: new Mat({
                program: 'color',
                mode: ['LINES'],
                data: {
                    'u_PointSize': { type: 'uniform1f', value: 1 },
                    'u_Color': { type: 'uniform4fv', value: [1, 1, 1, 1] },
                    'u_ModelM4': { type: 'uniformMatrix4fv', value: new Matrix4().elements },
                    'u_PvM4': { type: 'uniformMatrix4fv', value: new Matrix4().elements },
                },
            }),
        });
    }

    function rot(eye, lookAt, angle) {
        let sub = eye.clone().sub(lookAt);
        let j = angle * Math.PI / 180;
        let m4 = new Matrix4(
            Math.cos(j), -Math.sin(j), 0, 0,
            Math.sin(j), Math.cos(j), 0, 0,
            0, 0, 1, 0,
            0, 0, 0, 1
        );
        let a1 = sub.clone().applyMatrix4(m4);
        a1 = a1.add(lookAt);
        return a1;
    }

    let angle = 0;
    (function ani() {
        let center = new Vector3(0.5, 0.5, 0);

        angle += 0.1;

        // let a1 = rot(a, center, angle);
        // obja.setAttrib('a_Position', { array: new Float32Array([a1.x, a1.y]) });
        // let b1 = rot(b, center, angle);
        // objb.setAttrib('a_Position', { array: new Float32Array([b1.x, b1.y]) });
        // let c1 = rot(c, center, angle);
        // objc.setAttrib('a_Position', { array: new Float32Array([c1.x, c1.y]) });


        draw();
        requestAnimationFrame(ani);
    })();

    function draw() {
        scene.draw();
    }
</script>

</html>